VPN Mining Platform UI/Feature Mapping

Overview

The VPN Mining Platform consists of two main applications:

• A Flutter-based mobile app for end users
• A NextJS-based admin panel for platform management

• Overview
• User App Features (Flutter)
  • A. Mining Dashboard
  • B. Server Selection & Connection
  • C. Mining Statistics
• Admin Panel Features (NextJS)
  • A. Server Management
  • B. Protocol Management
  • C. Mining Operations
• GraphQL API Reference
  • Server Management
  • Mining Operations
  • Protocol Management
  • Mining Rewards
  • Server Configuration
  • Example Variables

User App Features (Flutter)

A. Mining Dashboard

API Queries

getMiningStatus: Current mining status and rewards
getServerMetrics: Performance metrics
getMiningRewards: Current reward stats

UI Components

1. Mining Status Card

• Current mining status (active/inactive)
• Server connection status
• Current hashrate
• Quick action buttons

2. Performance Metrics Card

• CPU Usage: getServerMetrics.cpuUsage
• Memory Usage: getServerMetrics.memoryUsage
• Network Speed: getServerMetrics.networkSpeed
• Progress indicators for each metric

3. Rewards Summary Card

• Today's mining rewards: getMiningRewards.today
• Total rewards: getMiningRewards.total
• Mining efficiency: getMiningRewards.efficiency
• Performance trend graph

Implementation

class MiningDashboard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        MiningStatusCard(),
        PerformanceMetricsCard(),
        RewardsSummaryCard(),
      ],
    );
  }
}

B. Server Selection & Connection

API Queries

getAvailableServers: List of mining-enabled servers
getServerDetails: Detailed server information
getProtocolConfig: Available protocols for server

UI Components

1. Server List

• Location-based sorting
• Performance indicators
• Protocol badges
• Connection status

2. Server Detail View

• Performance metrics
• Protocol options
• Mining efficiency rating
• Quick connect button

3. Connection Status Panel

• Current protocol
• Connection duration
• Data transferred
• Mining status

C. Mining Statistics

API Query

getMiningHistory(startDate, endDate)

UI Components

1. Mining History List

• Filter by date range
• Sort by reward amount
• Mining session cards showing:
  • Duration
  • Rewards earned
  • Server used
  • Protocol type

2. Performance Analytics

• Daily/Weekly/Monthly views
• Efficiency charts
• Reward trends
• Server performance comparison

Admin Panel Features (NextJS)

A. Server Management

API Queries

getAllServers: Global server list
getServerPerformance: Server metrics
getServerConfig: Server configuration

UI Components

1. Server Overview Dashboard

• Total active servers
• Global performance metrics
• Alert indicators
• Quick action panel

2. Server Management Grid

• Status indicators
• Performance metrics
• User connections
• Mining statistics

Implementation

const ServerManagement: React.FC = () => {
  return (
    <div>
      <ServerOverviewDashboard />
      <ServerManagementGrid />
    </div>
  );
};

B. Protocol Management

API Queries

getProtocolStats: Protocol performance
getProtocolConfig: Protocol settings
getUserProtocolUsage: Usage statistics

UI Components

1. Protocol Dashboard

• Active protocols
• Performance metrics
• User distribution
• Configuration panel

2. Protocol Configuration

• Settings management
• Security options
• Performance tuning
• User limits

C. Mining Operations

API Queries

getMiningOperations: Active mining operations
getMiningStats: Mining statistics
getUserMiningData: User mining details

UI Components

1. Mining Operations Dashboard

• Active miners
• Global hashrate
• Reward distribution
• Performance metrics

2. User Mining Management

• Active miners list
• Performance tracking
• Reward management
• Issue resolution

GraphQL API Reference

Server Management

query GetServers {
  servers {
    id
    name
    location
    status
    metrics {
      cpuUsage
      memoryUsage
      networkSpeed
      activeMiners
    }
    protocols {
      type
      status
      connections
    }
  }
}

Mining Operations

query GetMiningStatus {
  miningStatus {
    active
    hashrate
    efficiency
    rewards {
      daily
      total
      pending
    }
    server {
      id
      name
      performance
    }
  }
}

Protocol Management

query GetProtocolStats {
  protocolStats {
    type
    activeConnections
    dataTransferred
    performance {
      latency
      stability
      throughput
    }
    security {
      status
      lastUpdated
      certificates
    }
  }
}

Mining Rewards

mutation ClaimRewards {
  claimMiningRewards {
    amount
    timestamp
    server {
      id
      name
    }
    performance {
      efficiency
      duration
    }
  }
}

Server Configuration

mutation UpdateServerConfig {
  updateServer(input: $input) {
    id
    name
    config {
      mining {
        enabled
        maxMiners
        rewardRate
      }
      protocols {
        enabled
        settings
      }
      performance {
        limits
        optimization
      }
    }
  }
}

Example Variables

{
  "input": {
    "serverId": "server_123",
    "config": {
      "mining": {
        "enabled": true,
        "maxMiners": 100,
        "rewardRate": 1.5
      },
      "protocols": {
        "enabled": ["VLESS", "REALITY"],
        "settings": {
          "VLESS": {
            "port": 443,
            "encryption": "aes-256-gcm"
          }
        }
      }
    }
  }
}